<template>
    <el-upload
            ref="uploadRef"
            class="upload-demo"
            drag
            :headers="header"
            :action="updateUrl"
            accept="application/zip"
            :before-upload="beforeUpload"
            :on-error="error"
            :on-success="uploaded"
    >
        <el-icon class="el-icon--upload">
            <upload-filled/>
        </el-icon>
        <div class="el-upload__text">
            拖放插件zip包到这里<em>也可以点击上传</em>
        </div>
        <template #tip>
            <div class="el-upload__tip">
                文件建议小于2M
            </div>
        </template>
    </el-upload>
</template>

<script setup lang="ts">
import {ref} from "vue"
import {UploadFilled} from '@element-plus/icons-vue'
import {ElMessage, UploadInstance, UploadRawFile} from "element-plus"
import {getToken, getUid} from "@/utils/cache/cookies"

const updateUrl = import.meta.env.VITE_BASE_API + 'admin/upload/upload'
const header = new Headers;
const uploadRef = ref<UploadInstance>()

header.append('V-Token', getToken())
header.append('V-Uid', getUid())
header.append('accept', 'application/json');

const beforeUpload = (rawFile: UploadRawFile) => {
    header.set('V-Time', (new Date()).getTime())
}

const error = (error: Error,) => {
    console.log(error)
    ElMessage({message: error, type: 'warning'})
}

const uploaded = (res: any) => {
    uploadRef.value!.clearFiles()
    ElMessage({message: res.msg, type: res.code === 1 ? 'success' : 'warning'})
}
</script>

<style>

</style>